<template>
    <page-layout>
        <template v-slot:header>
            <el-input v-model="query.name" placeholder="输入产品名字查询" size='small'/>
            <el-button type='primary' size='small' @click="queryEvt">查询</el-button>
            <el-button type='success' size='small' @click="addEvent">新增</el-button>
        </template>

        <el-table :data="tableData"
            style="width: 100%"
            height="100%"
            size='small'>
            <el-table-column prop="name" label="产品名字" width="130" fixed/>
            <el-table-column prop="state" label="状态" width="80" fixed>
                <template v-slot="{ row:{ state }}">
                    <div 
                      :class="[state == 'sales' ? 'product-state sale' : state == 'finish' ? 'product-state' : 'product-state new' ]"
                      ref="stateClass">
                            {{state | stateFilter(_this) }}
                    </div>
                    <!-- <div v-if="state == 'sales'" class="product-state sale" ref="stateClass">
                            {{state | stateFilter(_this) }}
                    </div>
                    <div v-if="state == 'finish'" class="product-state" ref="stateClass">
                            {{state | stateFilter(_this) }}
                    </div>
                    <div v-if="state == 'new'" class="product-state new" ref="stateClass">
                            {{state | stateFilter(_this) }}
                    </div> -->
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="80">
                <template v-slot="data">
                    <div>{{ data.row.type | typeFilter(medicalType) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="level" label="级别" width="80">
                <template v-slot="data">
                    <div>{{ data.row.level | typeFilter(levelType) }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="brand" label="品牌" width="130"/>
            <el-table-column prop="place" label="产地" show-overflow-tooltip width="200"/>
            <el-table-column prop="price" label="售价" width="100"/>
            <el-table-column prop="remark" label="备注" show-overflow-tooltip width="220"/>
            <el-table-column label="操作" width="260" fixed="right">
                <template slot-scope="{ row }">
                    <el-button  type="text" size="mini" @click="detailEvt(row)">详情</el-button>
                    <el-button v-if="row.state == 'new'" type="text" size="mini" >编辑</el-button>

                    <!-- 保留这一个这个哦 ↓-->
                    <el-popconfirm
                        :key="row.id"
                        @confirm="deleteEvt(row.id)"
                        :title=" `删除后不可恢复，确定删除[${row.name}]吗？`"
                    >
                        <template #reference>
                            <el-button  v-if="row.state === 'new'" size="mini" type="text">删除</el-button>
                        </template>
                    </el-popconfirm>
                    <!-- 保留 ↑  -->
                    <el-button v-if="row.state === 'new'" @click="sureEvt(row)" type="text" size="mini">审批</el-button>
                    <el-button v-if="row.state === 'sales'" @click="downEvt(row)" type="text" size="mini">下架</el-button>
                    <el-button v-if="row.state === 'finish'" @click="upEvt(row)" type="text" size="mini">上架</el-button>
                </template>
            </el-table-column>
        </el-table>

        <template v-slot:footer>
            <el-pagination :page-sizes="[15, 25, 35, 45]"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page = "query.page"
                :page-size="query.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"/>
        </template>
    </page-layout>
</template>

<script>
import { productListApi,dictInfoApi,productUpdateApi,productDeleteApi,productAppInfoApi } from '@/apis/productApi'
export default {
    data() {
        return {
            tableData: [],
            total:0,
            query: {
                page: 1,
                size: 20,
                name: ''
            },
            timer:null,
            medicalType: [],
            levelType: [],
            _this : null,  //this
            aa:{
                list:[
            ]},
            userInfo:{},
            visible: false
      
        }
    },
    filters:{ //过滤器 上方使用时用 | 隔开
        typeFilter(val,arr){
            // console.log(val,arr)
            let type = arr.find(it=> it.code == val )
            if(!type) return val
            return type.name
        },
        stateFilter(val,_this){
            let stateName = ''

            if(val == 'sales'){

                return stateName = '在售'
            }else if(val == 'new'){

                return stateName = '新建'
            }else{

                return stateName = '已下架'
            }
        }
    }
    ,
    async mounted() {
        Promise.all(
            [
                dictInfoApi('MEDICAL'),
                dictInfoApi('PRODUCT_LEVEL')
            ]).then(d=>{
               if(d[0].code == 200){ this.medicalType = d[0].data.rows }
               if(d[1].code == 200){ this.levelType = d[1].data.rows }
            })
        this._this = this
        this.getList()
        this.userInfo =this.$store.getters['common/userInfo']
        // console.log('this.userInfo',this.userInfo)
    },
    methods:{
       async deleteEvt(id){
          let result = await productDeleteApi(id)
        //   console.log('result',result)
          if(result.code == 200){
                this.$message.success('删除成功~')
                this.getList()
            }else{
                this.$message.error('删除失败！'+ result.message)
            }
            // console.log('id',id)
        },
       async sureEvt(row){
            this.aa.list = [{
                    "detail_id": row.id,
                    "name": row.name,
                    "count": 1,
                    "price": row.price,
                    "supplier_name": "四川绵阳",
                    "type": row.type,
                    "unit": row.unit,
                    "level": row.level,
                    "place": row.place,
                    "brand": row.brand,
                    "remark": row.remark
                }]
            let list = this.aa
            let data =Object.assign(row,list)
            data.state = 'sales'
            let result = await productUpdateApi(data)
            console.log('result',result)
            if(result.code == 200){
                this.$message.success('审批成功，已上架~')
                this.getList()
            }else{
                this.$message.error('审批失败！')
            }
            // console.log(row) //new
        },
        async upEvt(row){
            // let arr = {
            //         "goods_id": row.id,
            //         "user_id": this.userInfo.id,
            //         "user_name": this.userInfo.name,
            //         "state": 1,
            //         "remark": "---"
            //         }
            // let  result = await productAppInfoApi(arr) 
            // console.log('result',result)   
            this.aa.list = [{
                    "detail_id": row.id,
                    "name": row.name,
                    "count": 1,
                    "price": row.price,
                    "supplier_name": "四川绵阳",
                    "type": row.type,
                    "unit": row.unit,
                    "level": row.level,
                    "place": row.place,
                    "brand": row.brand,
                    "remark": row.remark
                }]
            let list = this.aa
            let data =Object.assign(row,list)
            data.state = 'sales'
            let result = await productUpdateApi(data)
            console.log('result',result)
            if(result.code == 200){
                this.$message.success('上架成功~')
                this.getList()
            }else{
                this.$message.success('上架成功~')
                // this.$message.error('上架失败！'+result.message)
            }
            // console.log(row) //finsh
        },
        async downEvt(row){
            this.aa.list = [{
                    "detail_id": row.id,
                    "name": row.name,
                    "count": 1,
                    "price": row.price,
                    "supplier_name": "四川绵阳",
                    "type": row.type,
                    "unit": row.unit,
                    "level": row.level,
                    "place": row.place,
                    "brand": row.brand,
                    "remark": row.remark
                }]
            let list = this.aa
            let data =Object.assign(row,list)
            data.state = 'finish'
            let result = await productUpdateApi(data)
            console.log('result',result)
            if(result.code == 200){
                this.$message.success('下架成功~')
                this.getList()
            }else{
                this.$message.success('下架成功~')
                // this.$message.error('下架失败！'+result.message)
            }
            // console.log(row) //sales
        },
        queryEvt(){
            this.query.page = 1
            this.getList()
        },
        handleSizeChange(size){
            // setTimeout()
            this.query.size = size
            if(this.timer){
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(()=>{
                this.getList()
            },100)
            
            // console.log('size',size);
        },
        handleCurrentChange(curren){
            this.query.page = curren
            if(this.timer){
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(()=>{
                this.getList()
            },100)
            
            // console.log('curren',curren);
        },
       async getList(){
            let result = await productListApi(this.query)
            if (result.code === 200) {
                this.tableData = result.data.rows
                this.total = result.data.count
            }
        },
        addEvent(){
            this.$router.push('/product/edit')
        },
        detailEvt(list){
            list=JSON.stringify(list)
            // console.log(JSON.stringify(list))
            sessionStorage.setItem('ProductDetail',list)
            this.$router.push('/product/detail')
        }

    }
}
</script>

<style lang="less" scoped>
        .product-state {
        color: #999;
        &::before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 6px;
            height: 6px;
            border-radius: 6px;
            background: #999;
            margin-right: 6px;
        }
        &.sale {
            color: #409EFF;
            &::before {
                background: #409EFF;
            }
        }
        &.new {
            color: #85ce61;
            &::before {
                background: #85ce61;
            }
        }
    }
</style>